<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        .container{
            padding-top: 150px;
        }
        .list-group{
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入搜索关键字" id="search">
            <ul class="list-group" id="list-box">
               
            </ul>
        </div>
    </div>
    <script src="./js/ajax.js"></script>
    <script src="./js/template-web.js"></script>
    <script type="text.html" id="tpl">
        {{each result}}
         <li class="list-group-item">{{$value}}</li>
         {{/each}}
    </script>
    <script>
        var searchIpt = document.getElementById('search');
        var listBox = document.getElementById('list-box'); 
        var timer = null;
        searchIpt.oninput = function(){
            //清除上一次开启的定时器
            clearTimeout(timer);
            var key =  this.value;
            //trim()去除输入框前后的空格
            if(key.trim().length == 0){
                listBox.style.display = 'none';
                return;
            }
            //向服务器端发送请求
            timer = setTimeout(function(){
                
                    ajax({
                    type:'get',
                    url:'http://localhost:3000/searchAutoPrompt',
                    data:{
                        key:key
                    },
                    success:function(result){
                        console.log(result);
                        var html = template('tpl',{result:result})
                        listBox.innerHTML=html;
                        listBox.style.display = 'block';
                    }
                });
            },800);
        
        }
    </script>
</body>
</html>